<template>
	<van-action-sheet class="cust-sheet" v-model:show="myShow" title="联系客服"
					  cancel-text="关闭" @cancel="onClose" @close="onClose">
		<template #description>
			<div class="description">
				<div>客服时间：{{serviceTime}}</div>
				<div>微信联系：点击名称可复制微信号</div>
			</div>
		</template>
		<div class="action-wrap">
			<template v-for="(group,index) in waiterGroup" key="index">
				<van-divider v-if="group.list&&group.list.length>0">{{group.label}}</van-divider>
				<van-cell-group v-if="group.list&&group.list.length>0" class="info-icon">
					<van-cell is-link v-for="(item,i) in group.list" index="i">
						<template #icon><i class="iconfont">&#xe6f2;</i></template>
						<template #title><div @click="copyText(item.wxId,'微信号已复制')">{{item.waiterName}} <van-icon class="txt-success" name="wechat"/></div></template>
						<template #value><div @click="onPhoneClick(item.phone)" class="txt-value"><van-icon name="phone"/>{{item.phone}}</div></template>
					</van-cell>
				</van-cell-group>
			</template>
		</div>
	</van-action-sheet>
</template>
<style lang="scss" scoped>
.cust-sheet{
	.description{margin:-10px -2px; text-align:left;}
	.action-wrap{overflow:auto;max-height:60vh;}
	.info-icon{
		:deep(.van-cell__left-icon),.iconfont{color:var(--van-info-color);padding-right:4px;}
		:deep(.van-cell__title){flex:1.5}
		.txt-value{color:var(--font-third-color)}
		:deep(.van-cell){padding:8px 12px;}
	}
}
</style>
<script setup lang="ts">
import {copyText} from "@/utils/validate";
import _ from "lodash";
const isLoaded = ref(true)  //是否已经载入店里的客服？如果没有，则上拉弹框时再异步载入

//props
const props= defineProps({
	shopId:{
		type:String,
		required:true,
	},
	// modelValue:{
	// 	type:Boolean,
	// 	default:false,
	// },
})
const myShow=ref(false)//props.modelValue
const onClose=()=>{

	if(myShow.value){
		console.log('onClose')
		//emit('update:modelValue',false)
		myShow.value=false
	}
}

//店铺客服组织: todo: 需从后台读取
const waiterGroup=ref(<Array<any>>[
	{
		label:'店主掌柜',
		list:[
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
		]
	},
	{
		label:'售前咨询',
		list:[
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
		]
	},
	{
		label:'售后服务',
		list:[
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
		]
	},
	{
		label:'投诉建议',
		list:[
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
			{waiterName:'小小苏东坡',wxId:'gioshgf92384hr',phone:'18648945414',},
		]
	},
])
const serviceTime=ref('周一至周五 9:00至20:00， 周末休息') //todo: 读取客服信息时，顺带读取的客服时间段
const onPhoneClick=(phone:string)=>{
	//拨打电话
	if (!_.isEmpty(phone)) {
		window.location.href = 'tel://' + phone;
	}
}
const displayCustSheet=()=>{
	//todo: 还需要补充逻辑：如果还未载入，则先loading，载入完成后再上拉
	myShow.value=true
}
defineExpose({
	displayCustSheet,
})
</script>